<!--
 * @Description: 酒店城市配置
 * @Version: 2.0
 * @Autor: 许国辉
 * @Date: 2022-12-03 14:16:54
 * @LastEditors: 许国辉
 * @LastEditTime: 2022-12-05 15:23:45
-->
<template>
  <PageWrapper
    title="说明"
    contentBackground
    contentClass="flex"
    dense
    contentFullHeight
    fixedHeight
  >
    <template #headerContent>
      <div class="flex justify-between items-center">
        <span class="flex-1">
          酒店城市配置对差标至关重要，请根据所内实际情况进行酒店城市配置。
        </span>
      </div>
    </template>

    <div style="background-color: white; width: 100%; padding: 10px; font-size: 15px">
      <div style="border: 1px solid #f0f0f0; height: 90px; padding-top: 30px">
        <a-row>
          <a-col :span="1" style="text-align: right; line-height: 30px"
            ><label>省份名称</label></a-col
          >
          <a-col :span="5" style="padding: 0px 10px">
            <a-input
              placeholder="请输入城市名称"
              allow-clear
              v-model:value="hotelCityParam.proName"
            />
          </a-col>
          <a-col :span="1" style="text-align: right; line-height: 30px"
            ><label>城市code</label></a-col
          >
          <a-col :span="5" style="padding: 0px 10px"
            ><a-input
              placeholder="请输入城市code"
              allow-clear
              v-model:value="hotelCityParam.cityCode"
            />
          </a-col>
          <a-col :span="1" style="text-align: right; line-height: 30px"
            ><label>城市名称</label></a-col
          >
          <a-col :span="5" style="padding: 0px 10px">
            <a-input
              placeholder="请输入城市名称"
              allow-clear
              v-model:value="hotelCityParam.cityName"
            />
          </a-col>
          <a-col :span="1" style="text-align: right; line-height: 30px"
            ><label>城市级别</label></a-col
          >
          <a-col :span="5" style="padding: 0px 10px">
            <a-space>
              <a-select
                ref="select"
                v-model:value="cityLeave"
                style="width: 120px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="-1">全部</a-select-option>
                <a-select-option value="1">1线城市</a-select-option>
                <!-- <a-select-option value="2" disabled>Disabled</a-select-option> -->
                <a-select-option value="2">省会城市</a-select-option>
                <a-select-option value="0">其它城市</a-select-option>
              </a-select>
              <a-button type="primary" @click="getHotelCityByParam()">
                <template #icon><SearchOutlined /></template>
                查询
              </a-button>
              <a-button type="primary" @click="clearValue()">
                <template #icon><SearchOutlined /></template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div style="height: 10px"></div>
      <a-row>
        <a-col :span="24" style="text-align: right">
          <a-table
            :columns="columns"
            :data-source="hotelCities"
            :pagination="pagination"
            @change="handleTableChange"
            :scroll="tableHeight"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'cityLeave'">
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <a-radio-group
                      v-model:value="record.cityLeave"
                      @change="onChangeRadiockResult(record)"
                    >
                      <a-space>
                        <a-radio-button :value="0">一般城市</a-radio-button>
                        <a-radio-button :value="1">1线城市</a-radio-button>
                        <a-radio-button :value="2">省会城市</a-radio-button>
                      </a-space>
                    </a-radio-group>
                  </div>
                </div>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, UnwrapRef } from 'vue';
  import {
    getHotelCityByParams,
    updateHotelCityModel,
  } from '/@/api/travelCriterion/hotel/hotelCriterionAPI';
  import {
    defaultHotelCityParamsModel,
    HotelCityModel,
    HotelCityParamsModel,
  } from '/@/api/travelCriterion/hotel/model/hotelCityModel';
  import { PageWrapper } from '/@/components/Page';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';
  import { message } from 'ant-design-vue';
  export default defineComponent({
    components: { PageWrapper, SearchOutlined },

    setup() {
      const cityLeave = ref('全部');

      const handleChange = (value: number) => {
        hotelCityParam.value.cityLeave = value;
      };
      const focus = () => {
        console.log('focus');
      };
      const pagination = ref({
        // size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'], // 可选的页面显示条数
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        }, // 展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: false, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变pageSize
      });
      const loading = ref(false);
      const pageNum = ref(0);
      const pageSize = ref(0);
      //此处减去的430是其他固定元素块的总高度
      const tableHeight = ref({ x: '100%', y: document.body.clientHeight - 420 });

      const handleTableChange = (e: any) => {
        pagination.value = e;
        loading.value = true;
        pageNum.value = e.current - 1;
        pageSize.value = e.pageSize;
        // const query = {
        //   ...this.queryParams,
        // };
        // const pageReq = { page: pageNum, size: pageSize };
        // listWmsWarehouse(query, pageReq).then((response) => {});
      };

      const columns = [
        {
          title: 'id',
          dataIndex: 'id',
          width: 50,
          key: 'id',
        },
        {
          title: '省份代码',
          dataIndex: 'proCode',
          width: 80,
          align: 'left',
          key: 'proCode',
        },
        {
          title: '省份',
          dataIndex: 'proName',
          align: 'left',
          width: 100,
          key: 'proName',
        },
        {
          title: '城市code',
          dataIndex: 'cityCode',
          align: 'left',
          width: 120,
          key: 'cityCode',
        },
        {
          title: '城市名称',
          dataIndex: 'cityName',
          align: 'left',
          width: 100,
          key: 'cityName',
        },
        {
          title: '城市级别',
          dataIndex: 'cityLeave',
          align: 'left',
          width: 120,
          key: 'cityLeave',
        },
      ];
      const hotelCities = ref(Array<HotelCityModel>());
      const hotelCityParam = ref<HotelCityParamsModel>(defaultHotelCityParamsModel);

      const getHotelCityByParam = async () => {
        hotelCityParam.value.status = 1;
        await getHotelCityByParams(hotelCityParam.value)
          .then((data) => {
            //处理成功后的逻辑
            hotelCities.value = data; //这个data 是接收的resolve参数--
          })
          .catch((err) => {
            console.log(err);
          });
      };
      const clearValue = () => {
        hotelCityParam.value.cityCode = '';
        hotelCityParam.value.cityName = '';
        hotelCityParam.value.proName = '';
      };

      const editableData: UnwrapRef<Record<string, HotelCityModel>> = reactive({});

      const edit = (key: number) => {
        editableData[key] = cloneDeep(hotelCities.value.filter((item) => key === item.id)[5]);
      };
      const save = (key: number) => {
        Object.assign(hotelCities.value.filter((item) => key === item.id)[5], editableData[key]);
        delete editableData[key];
      };
      const onChangeRadiockResult = async (record) => {
        await updateHotelCityModel(record)
          .then((data) => {
            if (data != 1) {
              message.warning({
                content: () => '酒店城市数据更新失败',
                class: 'custom-class',
                style: {
                  marginTop: '20vh',
                },
              });
            }
          })
          .catch((err) => {
            message.warning({
              content: () => '数据更新出现问题' + err,
              class: 'custom-class',
              style: {
                marginTop: '20vh',
              },
            });
          });
      };

      onMounted(() => {
        getHotelCityByParam();
        //监听浏览器窗口变化
        window.onresize = () => {
          return (() => {
            tableHeight.value.y = document.body.clientHeight - 430;
          })();
        };
      });
      return {
        hotelCities,
        tableHeight,
        cityLeave,
        handleChange,
        focus,
        handleTableChange,
        pagination,
        columns,
        hotelCityParam,
        getHotelCityByParam,
        clearValue,
        onChangeRadiockResult,
        edit,
        save,
        editableData,
      };
    },
  });
</script>
